<template>
  <div>
     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Row :gutter="20">
      <Col span="18">
        <chart-bar
          :value="chart_bar_data1"
          style="height: 650px"
          :barWidth="HbarWidth"
          :text="hNumbertext"
          :rotate="hNumberRotate"
          :loading="loading"
        ></chart-bar>
      </Col>
      <Col span="5">
        <Form label-position="top" class="inputs">
              <Divider orientation="left">bar图表名称</Divider>
              <div style="margin-bottom: 40px">
                <FormItem>
                  <Input v-model="hNumbertext" placeholder="请输入图表名称" />
                </FormItem>
              </div>
              <div style="margin-bottom: 40px">
                <Divider orientation="left">legend名称</Divider>
                <draggable v-model="chart_bar_data1">
                  <transition-group>
                    <FormItem
                      v-for="(item, index) in chart_bar_data1"
                      :key="index"
                    >
                      <Input v-model="item.name"></Input>
                      <RadioGroup v-model="item.radios">
                        <Radio label="1">
                          <span>蓝色</span>
                        </Radio>
                        <Radio label="0">
                          <span>绿色</span>
                        </Radio>
                      </RadioGroup>
                    </FormItem>
                  </transition-group>
                </draggable>
                <Divider orientation="left">legend角度(0-360)</Divider>
                <FormItem>
                  <Input
                    v-model="hNumberRotate"
                    placeholder="请输入legend角度(0-360)"
                  />
                </FormItem>
                <Divider orientation="left">柱子宽度（0-100）</Divider>
                <FormItem>
                  <Input
                    v-model="HbarWidth"
                    placeholder="请输入legend角度(0-360)"
                  />
                </FormItem>
              </div>
            </Form>
        </Col>
    </Row>
  </div>
</template>

<script>
import ChartBar from "@/components/charts/bar.vue";
import HelloWorld from '@/components/HelloWorld.vue'
import draggable from 'vuedraggable'
export default {
  name: "bar",
  components: {
    HelloWorld,
    ChartBar,
    draggable
  },
  data() {
    return {
      loading: false,
      HbarWidth: '30',
      hNumbertext: 'bar图表名称',
      hNumberRotate: '45',
      chart_bar_data1: [
        { name: "大学1", value: "2.21", radios: "1" },
        { name: "大学2", value: "8.21", radios: "1" },
        { name: "大学3", value: "12.21", radios: "1" },
      ], 
    };
  },
  methods: {},
  mounted() {},
};
</script>
